import './App.css';

function App (props) {
  const { content, loading } = props

  function goto (title, href) {
    window.history.pushState({}, title, href);
  }

  return (
    <div className="App">
      <header className="main-header">
        <nav>
          <ol>
            <li><span onClick={() => goto('vueSubApp', '/vueapp')}>Vue-sub-app</span></li>
            <li><span onClick={() => goto('reactSubApp', '/reactapp')}>React-sub-app</span></li>
          </ol>
        </nav>
      </header>
      <div id='react-app' >
        {loading ? <div>loading...</div> : null}
        <div dangerouslySetInnerHTML={{ __html: content }} />
      </div>
    </div>
  );
}

export default App;
